<template>
  <div class="div">
    <div class="input-ss">
      <div class="text-gs">
     深圳洗脚公司
        </div>
      <div class="input-srk">
      <van-search   clearable @search="shoauo" v-model="q" @blur="deletess" placeholder="请输入搜索关键词"   shape="round" />
      </div>
    </div>
<img src="@/assets/imgages/ios3x_img_banner@3x.9ed762f2.png" alt="" class="imgs">
<div class="text-stai">
  <p :class="{batts:clicks=='tuijian'}" @click="recommended('tuijian')">推荐</p>
  <p class="text-juli">
    <span @click="logdajl(screen('desc','asc'))" >距离</span>
    <span class="i-tbiao">
      <i :class="{batts:clicks=='desc'}"   class="iconfont icon-shangjiantou1 "></i>
      <i :class="{batts:clicks=='asc'}"    class="iconfont icon-xiajiantou1"></i>
    </span>
  </p>
  <p  class="text-juli">
    评分
        <span class="i-tbiao"   @click="logdajl(screen('descs','ascs'))"  >
      <i :class="{batts:clicks=='descs'}"  class="iconfont icon-shangjiantou1 "></i>
      <i  :class="{batts:clicks=='ascs'}"   class="iconfont icon-xiajiantou1"></i>
    </span>
  </p>
  <p class="text-pf" :class="{batts:clicks=='screening'}" @click="recommended('screening')">筛选</p>
</div>

<!-- <span v-for="item in forms" :key="item.id" >{{item.id}}</span> -->
<!-- //公司数据 -->
<div class="bca">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >

   <van-card
  v-for="item in forms" :key="item.id"
  :desc= item.region
  :title= item.name
  :bottom= item.positions
  :thumb= imgst(item.logo)
  @click= routers(item.id)
  
>
  <template #tags>
    <van-tag plain>{{item.type}}</van-tag>
    <van-tag plain >{{item.step}}</van-tag>
  </template>
  <template #footer>
    <div class="text-daejushj">
      <div class="text-left">
            <p>在招职位:{{item.type}}/   </p>
            <p>最后跟新时间:{{ time(item.updated_at)}}</p> 
    </div>
      <div class="text-hde ">
          <span>{{item.score}}分</span>
          <div>{{item.distance}}</div>
       </div>
    </div>
  </template>
</van-card>



  </van-list>
</van-pull-refresh>
</div>
<ScreEning ref="screing"></ScreEning>
  </div>
</template>

<script>
import ScreEning from '@/views/company/components/ScreEning'
import {companyAPI } from '@/api/company'
// import { component } from 'vue/types/umd'
export default {
  components:{
ScreEning
  },
  name: 'ComPany',
  data () {
    return {
      // 控制点击颜色
      clicks:'',
      //输入框值
      q: '',
      dataa:{ 
         // 公司开始获取的索引
      start:0,
 //获取几条数据
      limit:10,

      // distance:''
      },
      
     //加载的数据
      forms:[],
      // 拼接的网址
      imgs:'http://hmmm.zllhyy.cn',
      //总条数
      total:0,
      // 控制到底加载
        loading: false,
      // 控制loading是否加载为trun为不加载
      finished: false,
        refreshing: false,
      
    }
  },
  created(){
    
    this.logdata()
    // this.daatdads()
  },
  computed:{

  },
  methods:{
    deletess(){
      if(this.q==''){
        delete this.dataa.q
        this.logdata()
      }
    },
    // 搜索
    shoauo(){
    this.dataa.q=this.q
    this.logdata()
    },
    // 判断距离
 async   logdajl(distance){
  this.clicks=distance
if(distance=='descs'){
 this.dataa.score='desc'
}else if(distance=='ascs'){
 this.dataa.score='asc'
}else if(distance=='desc'||distance=='asc'){
   this.dataa.distance = distance
}
  
  
   this.logdata()
    
    // console.log(this.dataa);
    },
    // 处理一个点击事件两个选择
    screen( desc,asc){
    if(this.clicks=== desc){
         return asc
      }else if (this.clicks===asc){
        return desc
      } else  if(this.clicks !==desc|| this.clicks !==asc){
         return desc
      }
    },
    // 点击跳转到公司详情
   routers(id){
    this.$router.push(`/details/${id}`)
    // console.log( id);
   },
    recommended(clicks){
      this.dataa.start = 0
      this.clicks=clicks
      if(this.clicks=='screening'){
        this.$refs.screing.show=true
      }else if(this.clicks=='tuijian'){
        this.dataa={}
        this.dataa.start= 0
        this.dataa.limit= 10
      }
      this.logdata()
    },
    // 实现下拉列表刷新
     async   onLoad() {
       this.dataa.start=this.dataa.start+this.dataa.limit
      const res= await companyAPI(this.dataa)

    const data=res.data.list
    this.forms.push(...data)
   
        this.loading = false;

        if (this.forms.length >= this.total) {
          this.finished = true;
        }
     
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },



    //时间处理
    time(item){
    const data=  item.split('-')
    const data2=  data[2].split('T')
    data.push(data2[0])
    // console.log(data);
    // console.log(data2);
    return [data[0],data[1],data[3]].join(':')
    },
    // 处理图片数据
    // imgst(logo){
    //   return this.imgs+logo
    // },
    // 测试
  //  async daatdads(){
  //   const res= await companiesAPI(5)
   
  //   console.log('测试数据',res);
  // // //  await this.$nextTick()
  // //   this.total=res.data.total
  // //   this.forms=res.data.list
  //   },
    //加载数据
   async logdata(){
    const res= await companyAPI(this.dataa)
   
    console.log('from',res);
  //  await this.$nextTick()
    this.total=res.data.total
    this.forms=res.data.list
    // this.dataa={}
    // this.dataa.start=0
    // this.dataa.limit=10
    }
  }
}
</script>

<style  lang="less" scoped>
.div{

width: 350px;
padding: 10px;
.input-ss{
  height: 40px;
 display: flex;
justify-content: space-between;
margin-bottom: 10px;
.text-gs{
  white-space:nowrap;
  height: 40px;
  text-align: left;
  line-height: 55px;
  font-weight: 800;

font-size: 16px;
}
.input-srk{

width: 290px;
}
}
.imgs{
  width: 100%;
  margin-left: 3px;
}
.text-stai{
  height: 80px;
  display: flex;
  justify-content: space-evenly;
  .text-juli{
position: relative;
 
  .i-tbiao{
    font-size: 14px;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 40px;
    i{
      font-size: 10px;
    }
  }
   }
  .text-pf{
    margin-left: 60px;
  }
  .batts{
    color: red;
  }
}
.text-daejushj{
  display: flex;
  justify-content: space-between;
  .text-left{
    display: flex;
  }
  .text-hde{
    display: flex;
    flex-direction: column;
align-items: center;
// justify-conent: space-between;
  }
}
 ::v-deep .van-card__title{
      font-size: 18px;
    margin-top: 10px;
}
.bca{
  padding-bottom: 40px;
}
}
</style>